/**
 * 二维码设置
 */
function scQrcodeSetting() {
    var com = scCommon.instance();
    var crEle = com.crEle;

    /**
     * 条码属性
     */
    var qrcodeItems = [
        { label: "二维码文本：", value: "text", type: "input", placeholder: "必填" },
        {
            label: "二维码颜色：", value: "style.color", type: "dropdown", display: "color", component: "scColorpickerSetting",
            param: { color: "#ddd" }
        },
        { label: "二维码预览：", value: "qrcode_preview", type: "div", style: {
            width: "auto", height: 128, overflow: "hidden"
        } },
    ];

    var box = null;

    /**
     * 创建视图
     * @returns 
     */
    this.createView = function (opt) {
        box = crEle("div", "sc-qrcode-setting");
        var data = opt.data ? opt.data : {};
        com.insertNode(qrcodeItems, data, box, "sc-qrcode-setting-row", (input) => {
            if (!input.addEventListener) return;
            input.addEventListener("change", () => {
                com.getData(box).then((data) => {
                    let preview = document.querySelector("div[name='qrcode_preview']");
                    preview.innerHTML = "";
                    new QRCode(preview, {
                        //扫描二维码后的内容
                        text: data.text, 
                        //二维码的宽
                        width: 128, 
                        //二维码的高
                        height: 128, 
                        //二维码线条颜色
                        colorDark: data.style.color ? data.style.color : "#000", 
                        //二维码背景颜色
                        colorLight: "#ffffff", 
                        //二维码等级
                        correctLevel: QRCode.CorrectLevel.H 
                    });
                })
            });
        });

        return box;
    }

    /**
     * 获取数据
     * @returns 
     */
    this.getData = function () {
        return new Promise((resolve)=>{
            let p = com.getData(box);

            p.then((d)=>{
                let data = {};
                let canvas = document.querySelector("div[name='qrcode_preview'] canvas");
                data.$value = canvas.toDataURL("image/png");
                data.$option = d;
    
                resolve(data);
            })
        })
    }
}